<!DOCTYPE html>
<head>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#update").click(function(){
			var lon = $("#lon").attr("value");
			var lat = $("#lat").attr("value");
			console.log(lon+" "+lat);
			$("#side").attr("src","http://maps.googleapis.com/maps/api/staticmap?center="+lon+","+lat+"&zoom=16&size=200x225&scale=2&sensor=false");
		});
	});
	</script>
</head>
<body>
	<div style="weight:100%">
		<input id="lon" type="text" name="logx" value="-22.23000"/>
		<input id="lat" type="text" name="latx" value="-45.932000"/>
		<input id="update" type="button" value="update"/>
	</div>
	<div style="weight:600px">
		<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.23000,-45.93200&zoom=16&size=200x225&scale=2&sensor=false" style="left: -5px; position: relative;" />
		<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.23000,-45.93200&zoom=16&size=200x225&scale=2&sensor=false" id="side" style="left: -10px; position: relative;" />
	</div>
</body>
</html>